{extend name='extra@admin/content'}

{block name="button"}
<div class="nowrap pull-right" style="margin-top:10px;">
    <button data-update="" data-action="{:url('backadd')}" class='layui-btn layui-btn-small'><i class='fa fa-ban'></i>
        移入黑名单
    </button>
</div>

<div class="nowrap pull-right" style="margin-top:10px;margin-right:10px;">
    <button data-load="{:url('sync')}" class='layui-btn layui-btn-small'><i class="fa fa-skyatlas"></i> 同步粉丝</button>
</div>
{/block}

{block name="content"}

<!-- 表单搜索 开始 -->
<form class="layui-form layui-form-pane form-search" action="__SELF__" onsubmit="return false" method="get">
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
            <input name="nickname" value="{$Think.get.nickname|default=''}" placeholder="粉丝昵称" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-inline">
            <select name='sex' class='layui-select' lay-search>
                <option value=''> - 选择性别 -</option>
                <!--{if $Think.get.sex eq 1}-->
                <option selected value="1">- 男 -</option>
                <!--{else}-->
                <option value="1">- 男 -</option>
                <!--{/if}-->
                <!--{if $Think.get.sex eq 2}-->
                <option selected value="2">- 女 -</option>
                <!--{else}-->
                <option value="2">- 女 -</option>
                <!--{/if}-->
            </select>
        </div>
    </div>

    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">粉丝标签</label>
        <div class="layui-input-inline">
            <select name='tag' class='layui-select' lay-search>
                <option value=''> - 选择标签 -</option>
                <!--{foreach $tags as $key=>$tag}-->
                <!--{if $Think.get.tag eq $key}-->
                <option selected value="{$key}">{$tag}</option>
                <!--{else}-->
                <option value="{$key}">{$tag}</option>
                <!--{/if}-->
                <!--{/foreach}-->
            </select>
        </div>
    </div>

    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">国家</label>
        <div class="layui-input-inline">
            <input name="country" value="{$Think.get.country|default=''}" placeholder="国家" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-inline">
            <input name="province" value="{$Think.get.province|default=''}" placeholder="省份" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-inline">
            <input name="city" value="{$Think.get.city|default=''}" placeholder="城市" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-inline">
        <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i> 搜 索</button>
    </div>
</form>
<!-- 表单搜索 结束 -->

<form onsubmit="return false;" data-auto="" method="POST">
    <input type="hidden" value="resort" name="action"/>
    <table class="table table-hover">
        <thead>
        <tr>
            <th class='list-table-check-td'>
                <input data-none-auto="" data-check-target='.list-check-box' type='checkbox'/>
            </th>
            <th class='text-left'>用户昵称</th>
            <th class='text-left'>OpenID</th>
            <th class='text-center'>性别</th>
            <th class='text-center'>标签</th>
            <th class='text-center'>区域</th>
            <th class='text-center'>关注时间</th>
        </tr>
        </thead>
        <tbody>
        {foreach $list as $key=>$vo}
        <tr>
            <td class='list-table-check-td'>
                <input class="list-check-box" value='{$vo.id}' type='checkbox'/>
            </td>
            <td class='text-left'>
                <img style="width:25px;height:25px;border-radius:50%;margin-right:10px" data-tips-image src="{$vo.headimgurl|default='__PUBLIC__/static/theme/default/img/unsharp.jpg'}"/>
                {$vo.nickname|default="<span style='color:#999'>未设置微信昵称</span>"}
            </td>
            <td class='text-left'>{$vo.openid|default="<span style='color:#ccc'>未知</span>"}</td>
            <td class='text-center'>{$vo.sex==1?'男':($vo.sex==2?'女':'未知')}</td>
            <td>
                <span>
                    <a data-add-tag='{$vo.id}' data-used-id='{:join(",",array_keys($vo.tags_list))}'
                       id="tag-fans-{$vo.id}" href='javascript:void(0)'
                       style='font-size:12px;font-weight:400;border-radius:50%;background:#9f9f9f'
                       class='label label-default'>+</a>
                </span>
                {if empty($vo.tags_list)}
                <span style='color:#999'>尚未设置标签</span>
                {else}
                {foreach $vo.tags_list as $k=>$tag}
                <span>
                    <a href='javascript:void(0)' style='font-size:12px;font-weight:400;background:#9f9f9f' class='label label-default'>{$tag}</a>
                </span>
                {/foreach}
                {/if}
            </td>
            <td class='text-center'>{$vo.country|default='<span style="color:#999">未设置区域信息</span>'}{$vo.province}{$vo.city}
            </td>
            <td class='text-center'>{$vo.subscribe_at}</td>
        </tr>
        {/foreach}
        {if empty($list)}
        <tr>
            <td colspan="10" style="text-align:center">没 有 记 录 了 哦 !</td>
        </tr>
        {/if}
        </tbody>
    </table>
    {if isset($page)}<p>{$page}</p>{/if}
    <script>window.form.render();</script>
</form>

<div id="tags-box" class="hide">
    <form>
        <div class="row" style='max-height:230px;overflow:auto;margin-right:0'>
            {foreach $tags as $key=>$tag}
            <div class="col-xs-4">
                <label style="overflow:hidden;text-overflow:ellipsis;display:block;white-space:nowrap">
                    <input value="{$key}" type="checkbox"/> {$tag}
                </label>
            </div>
            {/foreach}
        </div>
        <div class="text-center" style="margin-top:10px">
            <div class="hr-line-dashed" style="margin-top:0"></div>
            <button type="button" data-event="confirm" class="layui-btn layui-btn-small"><i class="fa fa-floppy-o"></i>
                保存数据
            </button>
            <button type="button" data-event="cancel" class="layui-btn layui-btn-danger layui-btn-small">
                <i class="fa fa-close"></i>
                取消编辑
            </button>
        </div>
    </form>
</div>
{/block}

{block name="script"}
{if auth("$classuri/tagset")}
<script>
    // 添加标签
    $('body').find('[data-add-tag]').map(function () {
        let self = this;
        let fans_id = this.getAttribute('data-add-tag');
        let used_ids = (this.getAttribute('data-used-id') || '').split(',');
        let $content = $(document.getElementById('tags-box').innerHTML);
        for (let i in used_ids) {
            $content.find('[value="' + used_ids[i] + '"]').attr('checked', 'checked');
        }
        $content.attr('fans_id', fans_id);
        // 标签面板关闭
        $content.on('click', '[data-event="cancel"]', function () {
            $(self).popover('hide');
        });
        // 标签面板确定
        $content.on('click', '[data-event="confirm"]', function () {
            let tags = [];
            $content.find('input:checked').map(function () {
                tags.push(this.value);
            });
            $.form.load('{:url("tagset")}', {fans_id: $content.attr('fans_id'), 'tags': tags.join(',')}, 'post');
        });
        // 限制每个表单最多只能选择三个
        $content.on('click', 'input', function () {
            ($content.find('input:checked').size() > 3) && (this.checked = false);
        });
        // 标签选择面板
        $(this).data('content', $content).on('shown.bs.popover', function () {
            $('[data-add-tag]').not(this).popover('hide');
        }).popover({
            html: true,
            trigger: 'click',
            content: $content,
            title: '标签编辑（最多选择三个标签）',
            template: '<div class="popover" style="max-width:500px" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content" style="width:500px"></div></div>'
        });
    });
</script>
{/if}
{/block}
